<template>
    <div>
        <div class="userBox">
            <div class="avatarBox">
                <img :src="avatar"/>
            </div>
            <div class="avatarDesc">
                <span class="username">{{ loginUser }}</span><br/>
                <span class="userdesc">{{ loginDesc }}</span>
            </div>
        </div>
        <div class="listBox">
            <yd-cell-group>
                <yd-cell-item>
                    <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
                    <span slot="left">昵称：</span>
                    <yd-input slot="right" type="text" v-model="nickname" placeholder="换个昵称"></yd-input>
                </yd-cell-item>
            </yd-cell-group>
            <yd-cell-group title="自述：">
                <yd-cell-item>
                    <yd-textarea slot="right" v-model="mydesc" placeholder="写些您的特点" maxlength="500"></yd-textarea>
                </yd-cell-item>
            </yd-cell-group>

            <yd-button type="primary" size="large" @click.native="changeInfo">提交</yd-button>
        </div>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            nickname: '',
            mydesc: ''
        }
    },
    computed: {
        loginUser () {
            return this.$store.getters.userName
        },
        loginDesc () {
            return this.$store.getters.userDesc
        },
        avatar () {
            return this.$store.getters.userAvatar
        }
    },
    methods: {
        changeInfo () {

        }
    }
}
</script>

<style scoped>
.avatarBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.avatarBox img {
    width: 1rem;
    height: 1rem;
    border-radius: .1rem;
}
.avatarDesc {
    padding-top: .3rem;
}
.userBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.4rem;
}
.username {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.userdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
</style>
